<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn">
        <text>&lsaquo;&lsaquo;</text>
      </view>
      <view class="nav-title">选择城市</view>
      <view class="nav-right"></view>
    </view>

    <!-- 搜索框 -->
    <view class="search-section">
      <view class="search-input-wrapper">
        <text class="search-icon">🔍</text>
        <input 
          class="search-input" 
          v-model="searchKeyword" 
          @input="searchAddress" 
          placeholder="搜索城市、街道或地点"
          placeholder-style="color: #999;"
        />
        <text v-if="searchKeyword" class="clear-icon" @click="searchKeyword = ''; searchResults = []; showSearchResults = false;">✕</text>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view v-if="showSearchResults && searchResults.length > 0" class="search-results">
      <view 
        v-for="(result, index) in searchResults" 
        :key="index" 
        class="search-result-item" 
        @click="selectSearchResult(result)"
      >
        <text class="result-title">{{ result.title }}</text>
        <text class="result-address">{{ result.address }}</text>
      </view>
    </view>

    <!-- 定位城市 -->
    <view class="location-section" v-if="!showSearchResults">
      <view class="location-header">
        <text class="location-label">定位城市</text>
        <view class="relocate-btn">
          <text>重新定位</text>
        </view>
      </view>
      <view class="location-city" @click="selectCurrentCity">
        <text>{{ currentCity }}</text>
        <text class="relocate-text" @click.stop="handleRelocate">重新定位</text>
      </view>
    </view>

    <!-- 热门城市 -->
    <view class="hot-section">
      <view class="section-header">
        <text class="section-title">热门城市</text>
      </view>
      <view class="hot-cities">
        <view class="hot-city-item" v-for="city in hotCities" :key="city" @click="selectCity(city)">
          <text>{{ city }}</text>
        </view>
      </view>
    </view>

    <!-- 所有城市 -->
    <view class="all-cities-section">
      <view class="section-header">
        <text class="section-title">国内</text>
      </view>
      <view class="city-list">
        <!-- 动态渲染所有字母分组的城市 -->
        <view 
          v-for="(cities, letter) in allCities" 
          :key="letter" 
          :id="`letter-${letter}`"
          class="letter-section"
        >
          <view class="letter-header">
            <text class="letter-text">{{ letter }}</text>
          </view>
          <view class="letter-cities">
            <view class="city-item" v-for="city in cities" :key="city" @click="selectCity(city)">
              <text class="city-name">{{ city }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 字母索引 -->
    <view class="letter-nav">
      <view class="letter-item" v-for="letter in getLetters()" :key="letter"
        :class="{ 'active': activeLetter === letter }"
        @click="handleLetterClick(letter)"
      >
        <text>{{ letter }}</text>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-btn {
  width: 40px;
  font-size: 20px;
  color: #333;
}

.nav-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.nav-right {
  width: 40px;
}

/* 搜索区域样式 */
.search-section {
  padding: 10px 15px;
  background-color: #fff;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 0 15px;
  height: 40px;
}

.search-icon {
  font-size: 16px;
  color: #999;
  margin-right: 8px;
}

.search-input {
  flex: 1;
  font-size: 14px;
  color: #333;
  background-color: transparent;
}

.clear-icon {
  font-size: 16px;
  color: #999;
  margin-left: 8px;
}

/* 搜索结果样式 */
.search-results {
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  max-height: 400px;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

.search-result-item {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.search-result-item:active {
  background-color: #f5f5f5;
}

.result-title {
  display: block;
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.result-address {
  display: block;
  font-size: 12px;
  color: #999;
}

/* 定位城市区域 */
.location-section {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
}

.location-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.location-label {
  font-size: 14px;
  color: #666;
}

.relocate-btn {
  font-size: 14px;
  color: #1989fa;
}

.location-city {
  font-size: 16px;
  color: #333;
  padding: 5px 0;
}

/* 热门城市区域 */
.hot-section {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
}

.section-header {
  margin-bottom: 15px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.hot-cities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hot-city-item {
  padding: 12px 0;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

.hot-city-item:active {
  background-color: #e8e8e8;
}

/* 所有城市区域 */
.all-cities-section {
  background-color: #fff;
  padding: 15px 15px 100px 15px;
}

.city-list {
  height: calc(100vh - 200px);
}

.letter-section {
  margin-bottom: 20px;
}

.letter-header {
  background-color: #f5f5f5;
  padding: 8px 15px;
  margin: 0 -15px;
}

.letter-text {
  font-size: 14px;
  color: #666;
  font-weight: bold;
}

.letter-cities {
  padding-top: 5px;
}

.city-item {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.city-name {
  font-size: 16px;
  color: #333;
}

.city-item:active {
  background-color: #f5f5f5;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .hot-cities {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .city-name {
    font-size: 15px;
  }
}

@media (min-width: 414px) {
  .hot-cities {
    grid-template-columns: repeat(4, 1fr);
  }
}
</style>

<script setup>
import { ref, onMounted } from 'vue';

// 腾讯地图API密钥
const QQMAP_KEY = 'IP6BZ-VFXHT-SJIXQ-LOD5I-FUOXF-J7BPV';

// 定位城市
const currentCity = ref('');

// 选中的字母
const activeLetter = ref('A');

// 搜索关键词
const searchKeyword = ref('');

// 搜索结果
const searchResults = ref([]);

// 是否显示搜索结果
const showSearchResults = ref(false);

// 基础热门城市列表（保留UI展示）
const hotCities = [
  '北京', '上海', '广州', '深圳', '成都',
  '杭州', '武汉', '西安', '郑州', '重庆'
];

// 简化的城市字母分类（保留UI展示）
const allCities = {
  'A': ['鞍山', '安庆', '安阳', '安顺', '阿克苏'],
  'B': ['北京', '上海', '广州', '深圳', '成都'],
  'C': ['重庆', '长沙', '长春', '成都', '常州'],
  'D': ['大连', '东莞', '德州', '丹东', '德阳'],
  'F': ['福州', '佛山', '抚顺', '阜阳', '潍坊'],
  'G': ['广州', '贵阳', '桂林', '赣州', '广安'],
  'H': ['杭州', '合肥', '哈尔滨', '邯郸', '衡水'],
  'J': ['济南', '金华', '嘉兴', '济宁', '九江'],
  'K': ['昆明', '开封', '克拉玛依', '喀什', '库尔勒'],
  'L': ['兰州', '洛阳', '临沂', '廊坊', '柳州'],
  'N': ['南京', '南昌', '南宁', '宁波', '南通'],
  'Q': ['青岛', '泉州', '曲靖', '衢州', '秦皇岛'],
  'S': ['上海', '深圳', '沈阳', '石家庄', '苏州'],
  'T': ['天津', '太原', '泰安', '唐山', '台州'],
  'W': ['武汉', '无锡', '温州', '威海', '潍坊'],
  'X': ['西安', '厦门', '徐州', '新乡', '襄阳'],
  'Y': ['烟台', '扬州', '盐城', '宜昌', '岳阳'],
  'Z': ['郑州', '淄博', '珠海', '中山', '肇庆']
};

// 城市定位逻辑 - 使用腾讯地图地理编码API获取真实城市名称
const handleRelocate = () => {
  return new Promise((resolve) => {
    try {
      currentCity.value = '定位中...';
      
      uni.getLocation({
        type: 'gcj02',
        altitude: false,
        success: (res) => {
          // 调用腾讯地图逆地理编码API获取城市名称
          uni.request({
            url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=${QQMAP_KEY}`,
            method: 'GET',
            success: (geoRes) => {
              if (geoRes.data && geoRes.data.status === 0 && geoRes.data.result && geoRes.data.result.address_component) {
                const addressComponent = geoRes.data.result.address_component;
                currentCity.value = addressComponent.city || addressComponent.province;
              } else {
                currentCity.value = '定位失败';
              }
              resolve(currentCity.value);
            },
            fail: (error) => {
              console.error('地理编码失败:', error);
              currentCity.value = '定位失败';
              resolve(currentCity.value);
            }
          });
        },
        fail: (error) => {
          console.error('获取位置失败:', error);
          currentCity.value = '请选择城市';
          resolve(currentCity.value);
        }
      });
    } catch (error) {
      console.error('定位逻辑异常:', error);
      currentCity.value = '请选择城市';
      resolve(currentCity.value);
    }
  });
};

// 搜索地址
const searchAddress = () => {
  if (!searchKeyword.value.trim()) {
    searchResults.value = [];
    showSearchResults.value = false;
    return;
  }
  
  // 使用腾讯地图关键词搜索API
  uni.request({
    url: `https://apis.map.qq.com/ws/place/v1/search?keyword=${encodeURIComponent(searchKeyword.value)}&boundary=region(中国,true)&key=${QQMAP_KEY}`,
    method: 'GET',
    success: (res) => {
      if (res.data && res.data.status === 0 && res.data.data) {
        searchResults.value = res.data.data;
        showSearchResults.value = true;
      } else {
        searchResults.value = [];
        showSearchResults.value = false;
      }
    },
    fail: (error) => {
      console.error('搜索失败:', error);
      searchResults.value = [];
      showSearchResults.value = false;
    }
  });
};

// 选择搜索结果
const selectSearchResult = (result) => {
  // 保存选择的城市信息到本地存储
  const city = result.city || result.province || '未知城市';
  uni.setStorageSync('selectedCity', city);
  
  // 构造城市数据
  const cityData = {
    city: city,
    address: result.address || result.title,
    latitude: result.location?.lat || 0,
    longitude: result.location?.lng || 0
  };
  
  // 通过事件向 index.vue 传递数据
  const pages = getCurrentPages();
  const prevPage = pages[pages.length - 2];
  if (prevPage) {
    uni.$emit('citySelected', cityData);
  }
  // 同时通过页面实例的事件通道传递
  try {
    // 检查getOpenerEventChannel是否存在
    if (typeof getOpenerEventChannel === 'function') {
      const eventChannel = getOpenerEventChannel();
      if (eventChannel) {
        eventChannel.emit('citySelected', cityData);
      }
    } else {
      console.warn('getOpenerEventChannel不可用，跳过页面通信');
    }
  } catch (e) {
    console.warn('页面间通信失败，继续执行:', e);
  }
  
  uni.showToast({
    title: `已选择${result.title}`,
    icon: 'success',
    duration: 1000,
    success: () => {
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    }
  });
};

// 选择城市逻辑
const selectCity = (city) => {
  // 不再保存城市到本地存储
  
  // 获取城市的经纬度和随机地址
  getCityRandomAddress(city).then((cityData) => {
    // 创建要传递的数据对象
    const cityDataToSend = {
      city: city,
      address: cityData.address,
      latitude: cityData.latitude,
      longitude: cityData.longitude
    };
    
    // 1. 通过全局事件发送数据（确保index.vue能接收到）
    uni.$emit('citySelected', cityDataToSend);
    
    // 2. 尝试通过事件通道发送数据（作为备选方案）
    try {
      // 检查getOpenerEventChannel是否存在
      if (typeof getOpenerEventChannel === 'function') {
        const eventChannel = getOpenerEventChannel();
        if (eventChannel) {
          eventChannel.emit('citySelected', cityDataToSend);
        }
      } else {
        console.warn('getOpenerEventChannel不可用，跳过页面通信');
      }
    } catch (e) {
      console.warn('页面间通信失败，继续执行:', e);
    }
    
    uni.showToast({
      title: `已选择${city}`,
      icon: 'success',
      duration: 1000,
      success: () => {
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      }
    });
  }).catch((error) => {
    console.error('获取城市地址失败:', error);
    // 显示具体的错误信息，如果有自定义的message则显示，否则显示通用错误
    const errorMessage = error.message || '获取地址信息失败，请稍后重试';
    
    // 显示错误信息，增加显示时间确保用户能看清
    uni.showToast({
      title: errorMessage,
      icon: 'none',
      duration: 3000
    });
    
    // 为错误代码121（调用量上限）添加额外提示
    if (error.code === 121) {
      // 短暂延迟后显示更详细的提示
      setTimeout(() => {
        uni.showModal({
          title: '提示',
          content: '当前API调用量已达到每日上限，建议您：\n1. 稍后再试\n2. 更换其他城市\n3. 明天继续使用',
          showCancel: false,
          confirmText: '我知道了'
        });
      }, 3100); // 确保在toast消失后再显示modal
    }
    
    // 不进行页面跳转，让用户可以重试或选择其他城市
  });
};

// 选择当前定位城市
const selectCurrentCity = () => {
  if (currentCity.value !== '定位中...' && currentCity.value !== '请选择城市') {
    selectCity(currentCity.value);
  } else {
    handleRelocate().then(() => {
      if (currentCity.value !== '定位中...' && currentCity.value !== '请选择城市') {
        selectCity(currentCity.value);
      } else {
        uni.showToast({ title: '定位失败，请重试', icon: 'none' });
      }
    });
  }
};

// 返回上一页
const handleBack = () => {
  uni.navigateBack();
};

// 点击字母索引
const handleLetterClick = (letter) => {
  activeLetter.value = letter;
  // 这里可以添加滚动到对应字母区域的逻辑
  const element = document.getElementById(`letter-${letter}`);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' });
  }
};

// 获取所有字母键
const getLetters = () => {
  return Object.keys(allCities);
};

// 获取城市地址和经纬度（使用腾讯地图搜索API）
const getCityRandomAddress = (city) => {
  return new Promise((resolve, reject) => {
    try {
      // 首先使用腾讯地图搜索API获取城市中心的经纬度
      uni.request({
        url: `https://apis.map.qq.com/ws/place/v1/suggestion?keyword=${encodeURIComponent(city)}&key=${QQMAP_KEY}`,
        method: 'GET',
        success: (res) => {
          // 详细记录API响应状态和数据
          console.log(`腾讯地图API响应 - 城市${city}:`, { 
            status: res.statusCode,
            dataStatus: res.data?.status,
            dataLength: res.data?.data?.length || 0,
            dataSample: res.data?.data?.[0] ? '有数据' : '无数据'
          });
          
          if (res.data && res.data.status === 0 && res.data.data && res.data.data.length > 0) {
            const cityData = res.data.data[0];
            const cityLocation = cityData.location;
            
            if (!cityLocation) {
              console.warn(`城市 ${city} 没有位置信息`);
              // 不使用默认坐标，返回空位置信息表示定位失败
              reject({
                code: 'NO_LOCATION',
                message: `获取${city}位置信息失败，该城市暂无位置数据`,
                city: city
              });
              return;
            }
            
            // 再使用腾讯地图的地点搜索API获取该城市的热门地点
            uni.request({
              url: `https://apis.map.qq.com/ws/place/v1/search?boundary=nearby(${cityLocation.lat},${cityLocation.lng},5000)&keyword=${encodeURIComponent('热门地点')}&key=${QQMAP_KEY}`,
              method: 'GET',
              success: (placeRes) => {
                let address = `${city}市中心`;
                
                if (placeRes.data && placeRes.data.status === 0 && placeRes.data.data && placeRes.data.data.length > 0) {
                  // 随机选择一个热门地点
                  const randomPlace = placeRes.data.data[Math.floor(Math.random() * placeRes.data.data.length)];
                  address = randomPlace.address || randomPlace.title;
                } else {
                  console.warn(`获取城市${city}热门地点失败，状态码:`, placeRes.data?.status);
                  // 如果没有获取到热门地点，使用城市名+区域作为地址
                  if (cityData.district) {
                    address = `${city}市${cityData.district}`;
                  }
                }
                
                // 生成随机偏移量（-0.01 到 0.01 度，大约 1 公里范围）
                const latOffset = (Math.random() - 0.5) * 0.02;
                const lngOffset = (Math.random() - 0.5) * 0.02;
                
                // 返回城市数据
                resolve({
                  city: city,
                  address: address,
                  latitude: cityLocation.lat + latOffset,
                  longitude: cityLocation.lng + lngOffset
                });
              },
              fail: (placeError) => {
                console.error('获取城市热门地点失败:', placeError.errMsg || placeError);
                // 如果获取热门地点失败，直接使用城市中心坐标
                resolve({
                  city: city,
                  address: `${city}市中心`,
                  latitude: cityLocation.lat,
                  longitude: cityLocation.lng
                });
              }
            });
          } else {
            // 详细记录API失败原因
            const errorMsg = res.data?.message || '无错误信息';
            const errorCode = res.data?.status || '未知状态码';
            console.warn(`无法通过腾讯地图API获取城市 ${city} 的信息，状态码: ${errorCode}, 错误信息: ${errorMsg}`);
            
            // 对不同错误代码提供更具体的错误信息
            let detailedMessage = `获取${city}位置信息失败，请稍后再试`;
            if (errorCode === 121) {
              detailedMessage = `API每日调用量已达上限，请明天再试`;
            } else if (errorCode === 190) {
              detailedMessage = `API密钥无效，请检查配置`;
            } else if (errorCode === 199) {
              detailedMessage = `API未开启WebService功能，请在控制台开启`;
            }
            
            // 不使用默认坐标，返回空位置信息表示定位失败
            reject({
              code: errorCode,
              message: detailedMessage,
              city: city
            });
          }
        },
        fail: (error) => {
          // 记录网络请求失败的详细信息
          console.error('获取城市坐标失败:', {
            errMsg: error.errMsg || error,
            apiKey: QQMAP_KEY.substring(0, 5) + '...' // 部分显示API密钥以保护安全
          });
          // 不使用默认坐标，返回空位置信息表示定位失败
          reject({
            code: 'NETWORK_ERROR',
            message: '网络请求失败，请检查网络连接后重试',
            city: city
          });
        }
      });
    } catch (error) {
      console.error('城市坐标处理异常:', error);
      // 不使用默认坐标，返回空位置信息表示定位失败
      reject({
        code: 'EXCEPTION',
        message: '获取城市信息时发生异常，请稍后重试',
        city: city
      });
    }
  });
};


// 页面加载时初始化
onMounted(() => {
  // 立即设置默认城市，确保页面加载时立即有内容显示
  currentCity.value = '定位中...';
  
  // 异步执行定位操作，不阻塞UI渲染
  setTimeout(() => {
    // 尝试获取用户位置
    try {
      uni.getSetting({
        success: (res) => {
          const hasPermission = res.authSetting['scope.userLocation'] === true;
          
          if (hasPermission) {
            console.log('用户已授权位置权限，尝试自动定位');
            handleRelocate();
          } else {
            console.log('用户未授权位置权限，显示默认城市');
            currentCity.value = '请选择城市';
          }
        },
        fail: () => {
          console.error('获取权限设置失败');
          currentCity.value = '请选择城市';
        }
      });
    } catch (error) {
      console.error('初始化定位逻辑异常:', error);
      currentCity.value = '请选择城市';
    }
  }, 100); // 轻微延迟，确保UI优先渲染
});
</script>